import React, { PureComponent } from "react";
import { connect } from "dva";
import Link from 'umi/link';
import moment from "moment";
import { Card, Table, Badge } from "antd";
import styles from "./component.less";




@connect(({ monitor, loading }) => ({
  TableData:monitor.maintenancPlan,
  loading: monitor.loading.maintenancPlan,
}))
export default class Dashboard extends PureComponent {
  constructor(props) {
    super(props);

  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'monitor/fetch_mainten_plan',
    });
  }



  render() {
    const { TableData, loading } = this.props;


    const data=[{
      key:"1",
      title:<span><Badge status="error" />超期未执行任务</span>,
      value:TableData.overDue,
    },{
      key:"2",
      title:<span><Badge status="warning" />今日到期（{moment().format("YYYY-MM-DD HH:mm")})</span>,
      value:TableData.today,
    },{
      key:"3",
      title:<span><Badge status="success" />明日到期（{moment().subtract(-1, "days").format("YYYY-MM-DD HH:mm")})</span>,
      value:TableData.tomorrow,
    },{
      key:"4",
      title:<span><Badge status="default" />本月计划（{moment().format("YYYY-MM")}）</span>,
      value:TableData.month,
    }]


    const columns = [{
      dataIndex: 'title',
      // render: text=> <span>{text}</span>
    },{
      dataIndex: 'value',
      align:'right',
      render: text=> <span>养护 {text ? text : '0'} 项</span>
    }];



    return (
      <Card
        title={ <span><Badge status="processing" />养护任务</span>}
        bordered={false}
        bodyStyle={{padding:0}}
        hoverable={true}

        // style={{marginTop:24}}
        style={{marginTop:24,position:'absolute',bottom:0,width:'100%',height:230}}
        className={styles.tablechart_card}

      >
        <Table className={styles.tablechartnormal}
               columns={columns}
               dataSource={data}
               pagination={false}
               size="small"
               showHeader={false}
               rowKey={"key"}
               loading={loading}

        />
      </Card>
    );
  }
}
